<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      label-position="left"
      label-width="100px"
      v-loading="formLoading"
    >
      <div class="module-title">模型信息</div>
      <el-form-item label="评价模型名称" prop="type" >
        {{ formData.name }}     
      </el-form-item>
      <el-form-item label="指标明细" prop="type" >
        {{ formData.name }}     
      </el-form-item>
      <el-form-item label="信息模态" prop="type" >
        {{ formData.name }}     
      </el-form-item>
      <el-form-item label="描述" prop="desc" >
        {{ formData.desc }}     
      </el-form-item>
      <div class="module-title">评价指标</div>
      <el-form-item label="指标1" prop="type" >
        {{ formData.name }}     
      </el-form-item>
      <el-form-item label="指标2" prop="type" >
        {{ formData.name }}     
      </el-form-item>
      <el-form-item label="指标3" prop="desc" >
        {{ formData.desc }}     
      </el-form-item>
      <div class="module-title">评价模版</div>
      <el-form-item label="参考文件" prop="type" >
        <el-link
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            type="primary"
            @click="importTemplate"
          >
            {{ formData.fileName }}
          </el-link>     
      </el-form-item>
      <el-form-item label="版本号" prop="desc" >
        {{ formData.desc }}     
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup lang="ts">
import { EvaluationTaskApi, EvaluationTaskVO } from '@/api/multiModel/evaluationtask'

/** 评测任务 表单 */
defineOptions({ name: 'EvaluationTemplate' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('评价模版预览') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  check: true,
  modelType: undefined,
  name: '',
  type: undefined,
  datasetTypeIds: [],
  largeModelIds: '',
  status: undefined
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  resetForm()
  dialogVisible.value = true
  formLoading.value = true
  // 修改时，设置数据
  try {
    formData.value = await EvaluationTaskApi.getEvaluationTask(id)
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 下载模板操作 */
const importTemplate = async () => {
  // const res = await CustomerApi.importCustomerTemplate()
  // download.excel(res, '客户导入模版.xls')
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    check: true,
    modelType: undefined,
    name: '',
    type: undefined,
    datasetTypeIds: [],
    largeModelIds: '',
    status: undefined
  }
  formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.module-title {
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  height: 24px;
  line-height: 24px;
  margin-left: 16px;
  margin-bottom: 16px;
  position: relative;
  &::before {
    position: absolute;
    z-index: 10;
    display: block;
    width: 4px;
    height: 24px;
    left: -16px;
    background-color: var(--el-color-primary);
    content: '';
  }
}
.radio-font {
  font-weight: 700;
}
.model-add {
  font-weight: 700;
  color: #171717;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.type-tips {
  font-size: 10px;
  color: #979797;
  line-height: 20px;
  // margin-top: -16px;
  margin-bottom: 11px;
}
.model-label {
  width: 100px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  &::before {
    content: "*";
    color: var(--el-color-danger);
    margin-right: 4px;
  }
}
.error-tips {
  color: var(--el-color-danger);
}
</style>